<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<script src="js/ajaxPasingdata.js"></script>
<script src="js/jindo.desktop.all.js"></script>
<script src="js/jindo_component.js"></script>
<script src="js/jquery-1.9.1.js"></script>

<link href="css/style.css" rel="stylesheet">
<style type="text/css">
ul#alldata li {
	list-style: none;
	float: left;
}

span.imwt {
	position: absolute;
	top: 5px;
	right: 40px;
	left: 130px;
}

.toif2_a {
	margin-right: 150px;
	margin-left: 0px;
}
.rolling { width:240px; border:3px solid violet; overflow:hidden; position:relative; }
.rolling ul { list-style:none; width:32700px; margin:0; padding:0; float:left; height: 100px; }
.rolling ul li {  width:200px; float:left; padding:5px; margin:5px; height : 50px; }

.tc-panel { display:none; }
.tc-selected { display:block; }
.tabs{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
.panels {
	margin: 0;
	list-style: none;
	border:1px solid #000;
	border-top-style:none;
	padding: 20px;
	position: relative;
	width:auto;
	top: -1px;
	clear: both;
	background-color: #323641;
	color:white;

	}
.tabs li.tc-selected {
	
	background-color:#323641;
	cursor:auto;
	border-bottom-style:none;
	color:#20f10e;
}
.tabs li {
	color:white;
	float: left;
	border: 1px solid black;
	padding: 10px;
	background-color: #4f5366;
	position: relative;
	list-style: none;
}
div#tabcontrol{
	width:250px;
	height:400px;
	border: 1px solid #ccc;
	font-family: '돋움',dotum,applegothic,sans-serif;
	font-size: 12px;
	overflow: auto;
}
</style>
</head>
<body>


<div id="tabcontrol" class="tabcontrol">
		<ul class="tabs">
			<li class="tc-tab tc-selected">실시간 검색어</li>
			<li class="tc-tab">핫토픽</li>
			<li class="tc-tab">FunUp키워드</li>
		</ul>
		<div class="panels">
			<div class="tc-panel tc-selected">
				<ul id="container_first">
				</ul>
			</div>
			<div class="tc-panel">
				<ul id="container_second">
				</ul>
			</div>
			<div class="tc-panel">
				<ul id="container_third">
				</ul>
			</div>
						
		
		</div>
	</div>


<div id="tabcontrol" class="tabcontrol">
		<ul class="tabs" style="width:3000px; height:20px">
			<li class="tc-tab tc-selected">정치</li>
			<li class="tc-tab">경제</li>
			<li class="tc-tab">사회</li>
			<li class="tc-tab">생활/문화</li>
			<li class="tc-tab">세계</li>
			<li class="tc-tab">IT/과학</li>
			<li class="tc-tab">연예</li>
			<li class="tc-tab">스포츠</li>
		</ul>
		<div class="panels">
			<div class="tc-panel tc-selected" id="data">
				
			</div>
			<div class="tc-panel" id="data2">
				
			</div>
			<div class="tc-panel" id="data3">
				
			</div>
						
		
		</div>
	</div>


<script type="text/javascript">
	var oTab = new jindo.TabControl(jindo.$('tabcontrol'));
	var oAccordion = new jindo.Accordion("panel");
</script>

	<!-- <section style="width: 300px; height: 400px; border: 1px solid #ccc; margin: 30px auto; overflow: auto;">
		<div style="width: auto; height: 40px; border: 1px solid #ccc;">
			<ul id="main_top">
				<li>실시간 검색어</li>
				<li onclick="check();">핫이슈</li>
				<li>펀 검색어</li>
			</ul>
		</div>
		<div id="prepare"
			style="width: 20000px; height: 400px; border: 1px solid #ccc; overflow: auto;">
			<div id="sss"
				style="border: 1px solid #ccc; width: 300px; height: 250px;">
				<ol id="container_first">
				</ol>
			</div>
			<div id="first"
				style="border: 1px solid #ccc; width: 300px; height: 250px;">
				<ol id="container_second">
				</ol>
			</div>
			<div id="second"
				style="border: 1px solid #ccc; width: 300px; height: 250px;">
				<ol id="container_third">
				</ol>
			</div>
		</div>
	</section> -->
	
//롤링 
	<section>
		<div id="rolling" class="rolling">
			<ul id="alldata">
			</ul>
		</div>
		<button onClick="checkLeft();">◀</button>
		<button onClick="checkRight();">▶</button>
	</section>


	<script type="text/javascript">
		ajaxUpdate('test01.json');
		ajaxUpdate('weather.data');
		ajaxUpdate('total.data');
		var oRolling = new jindo.Rolling(jindo.$('rolling'), {
			nFPS : 50, 
			nDuration : 0, //롤링 시간은 400ms 으로 설정
			sDirection : 'horizontal', //가로형으로 설정
			fEffect : jindo.Effect.cubicEase
		});
		function checkLeft(){
			if(oRolling.moveBy(-1)!=true){
				oRolling.moveLastTo(0);
			}
		}
		function checkRight(){
			if(oRolling.moveBy(1)!=true){
				oRolling.moveTo(0);
			}
		}
		
		//ajaxUpdate('test02.json');
		//ajaxUpdate('total.data');
	</script>

</body>
</html>